// components/tooltip/index.js
var $timer
Component({
  options: {
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    bgColor: {
      type: String,
      value: '#ffffff'
    },
    placement: {
      type: String,
      value: 'bottom', // top, right, bottom, left
    }
  },
  observers: {
    isShow(newData, oldData) {
      if (newData) {
        if ($timer) {
          clearTimeout($timer)
        }
        $timer = setTimeout(() => {
          this.setData({
            isOpen: newData
          })
        }, 20)
        this.initPlacement()
      } else {
        this.setData({
          isOpen: newData
        })
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShow: false,
    isOpen: false,
    contentDistance: '18rpx',
    contentStyle: '',
    arrowStyle: '',
  },

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    created: function () {
      // 组件实例刚刚被创建时
    },
    ready: function () {
      // 在组件布局完成后执行
    },
    moved: function () {
      // 在组件实例被移动到节点树另一个位置时执行
    },
    detached: function () {
      // 组件实例被从页面节点树移除时
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    initPlacement() {
      if (this.properties.placement == 'top') {
        this.data.contentStyle = `bottom: calc(100% + ${this.data.contentDistance});`
        this.data.arrowStyle = 'left: 40rpx; bottom: calc(100% + 10rpx);'
      } else if (this.properties.placement == 'right') {
        this.data.contentStyle = `top: 0; left: calc(100% + ${this.data.contentDistance});`
        this.data.arrowStyle = 'left: calc(100% + 10rpx); top: 35rpx;'
      } else if (this.properties.placement == 'bottom') {
        this.data.contentStyle = `top: calc(100% + ${this.data.contentDistance});`
        this.data.arrowStyle = 'left: 40rpx; top: calc(100% + 10rpx);'
      } else if (this.properties.placement == 'left') {
        this.data.contentStyle = `top: 0; right: calc(100% + ${this.data.contentDistance});`
        this.data.arrowStyle = 'right: calc(100% + 10rpx); top: 35rpx;'
      }
      this.setData({
        contentStyle: this.data.contentStyle,
        arrowStyle: this.data.arrowStyle
      })
    },
    // 切换是否显示状态
    handleToggleShow() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    handleContent(e) {
    },
    handleCloseTooltip() {
      this.setData({
        isShow: false
      })
    }
  }
})
